<template>
  <!-- 审核收货信息组件 -->
  <div v-loading="loading" element-loading-text="加载中" class="pad-l-20 pad-r-20">
    <el-row>
      <el-col align="right">
        <template v-if="thirdOrderObj.encryptReceiveFlag == 1">
          <el-tooltip class="item" effect="dark" content="点击查看收货信息" placement="top-start">
            <img :src="isLock ? lockIcon : unlockIcon" class="width-24 pointer" @click="doDecrypt(0)">
          </el-tooltip>
        </template>
      </el-col>
    </el-row>
    <el-row class="base-info">
      <el-col class="title">当前订单收货信息</el-col>
      <el-col>
        <span>收货人：</span>
        <span>{{ thirdOrderObj.customerName }}</span>
      </el-col>
      <el-col>
        <span>手机号：</span>
        <span>{{ thirdOrderObj.customerPhone }}</span>
      </el-col>
      <el-col>
        <span>收货地址：</span>
        <span>{{ thirdOrderObj.consigneeDetailAddress }}</span>
      </el-col>
    </el-row>

    <el-row class="base-info">
      <el-col class="title">申请修改为</el-col>
      <el-col>
        <span>收货人：</span>
        <span>{{ thirdOrderObj.changeReceiver }}</span>
      </el-col>
      <el-col>
        <span>手机号：</span>
        <span>{{ thirdOrderObj.changeReceiverTel }}</span>
      </el-col>
      <el-col>
        <span>收货地址：</span>
        <span>{{ thirdOrderObj.changeReceiverFullAddress }}</span>
        <span>{{ thirdOrderObj.changeReceiverAddress }}</span>
      </el-col>
    </el-row>
    
    <div>
      <div class="mar-b-10">
        <span class="font-w">拒绝修改原因</span>
        <span>（拒绝修改时，请先选中拒绝原因）</span>
      </div>
      <el-radio-group v-model="isApproved" class="mar-b-10">
        <el-radio :label="1001">订单已拣货</el-radio>
        <el-radio :label="1002">订单已配货</el-radio>
        <el-radio :label="1003">订单已分配仓库</el-radio>
        <el-radio :label="1004">订单已出库</el-radio>
        <el-radio :label="1005">订单已发货</el-radio>
      </el-radio-group>
      <div style="text-align: right;">
        <el-button v-if="!isLock" type="primary" @click="doReject">拒绝修改</el-button>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer mar-t-20">
      <el-button v-if="!isLock" type="primary" @click="doAgree">同意修改</el-button>
      <el-button @click="doClose">关闭</el-button>
    </div>

  </div>
</template>

<script>
  import { getThirdOrder, decryptReceiveInfo, doAuditAddress } from '@/api/goods/thirdOrder'
  import unlockIcon from '@/assets/images/unlock-icon.png'
  import lockIcon from '@/assets/images/lock-icon.png'
  
  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 第三方订单id
      thirdOrderId: {
        type: String
      }
    },
    data() {
      return {
        // 第三方订单对象
        thirdOrderObj: {
          encryptReceiveFlag: 0
        },
        // 锁图标
        lockIcon,
        unlockIcon,
        // 锁标识
        isLock: false,
        // 同意/拒绝 参数
        isApproved: '',
        loading: false
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.loading = true
        getThirdOrder(this.thirdOrderId).then(response => {
          this.loading = false
          if (response.isError) return
          this.thirdOrderObj = response.data
          this.isLock = this.thirdOrderObj.encryptReceiveFlag === 1
        })
      },
      // 解密事件
      doDecrypt(decryptReportType) {
        this.loading = true
        decryptReceiveInfo(this.thirdOrderObj.externalOrderNo, this.thirdOrderObj.platformType, decryptReportType).then(response => {
          this.loading = false
          if (response.isError) return
          this.isLock = false
          const data = response.data
          this.thirdOrderObj.customerName = data.customerName
          this.thirdOrderObj.customerPhone = data.customerPhone
          this.thirdOrderObj.consigneeDetailAddress = data.consigneeDetailAddress
          this.thirdOrderObj.changeReceiver = data.changeReceiver
          this.thirdOrderObj.changeReceiverTel = data.changeReceiverTel
          this.thirdOrderObj.changeReceiverAddress = data.changeReceiverAddress
        })
      },
      // 同意事件
      doAgree() {
        this.isApproved = '0'
        this.loading = true
        doAuditAddress(this.thirdOrderObj.thirdOrderId, this.isApproved).then(response => {
          this.loading = false
          if (response.isError) return
          this.$emit('callback', true)
        })
      },
      // 拒绝事件
      doReject() {
        if (!this.isApproved) {
          this.$message({ type: 'error', message: '请选择拒绝原因' })
          return
        }
        this.loading = true
        doAuditAddress(this.thirdOrderObj.thirdOrderId, this.isApproved).then(response => {
          this.loading = false
          if (response.isError) return
          this.$emit('callback', true)
        })
      },
      // 关闭事件
      doClose() {
        this.$emit('callback', false)
      }
    }
  }
</script>

<style lang="less" scoped>
  .base-info {
    background: aliceblue;
    width: 100%;
    line-height: 30px;
    padding: 10px 20px;
    margin-bottom: 20px;
    .title {
      text-align: center;
      padding-bottom: 15px;
      font-size: 14px; 
      font-weight: bold;
    }
  }
</style>